<template>
	<view class="uni-icon" :class="['icon','iconfont','icon-' + type,(color=='theme'?'uni-theme-color':''),(color=='main'?'uni-main-color':'')]" :style="{color:fontColor,'font-size':fontSize,'font-weight':fontWeight,'margin-right':marginRight}" @click="onClick()"></view>
</template>

<script>
	export default {
		name: 'uni-icon',
		props: {
			/**
			 * 图标类型
			 */
			type: String,
			/**
			 * 图标颜色
			 */
			color: String,
			weight:{ 
				type: [Boolean,String],
				defalut: false
			},
			right: {
			  type: [Number, String],
			  default: 10,
			},
			size: {
			  type: [Number, String],
			  default: 24,
			}
		},
		computed: {
			fontSize() {
				if(this.size.toString().lastIndexOf("px")>-1){
					return this.size;
				}else{
					return uni.upx2px(this.size) + 'px';
				}
			},
			marginRight() {
				return uni.upx2px(this.right) + 'px';
			},
			fontWeight() {
				return (this.weight ? "bold":"");
			},
			fontColor(){
				return (this.color=="theme" || this.color=="main" ? "":this.color);
			}
		},
		created() {
		
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style>
	/* @font-face {
		font-family: iconfont;
		font-weight: normal;
		font-style: normal;
		src: url('iconfont.ttf') format('truetype');
	} */
	
	@import 'iconfont.css';
	.uni-icon{
		vertical-align: middle;
	}
</style>